<!--
*@Author: QWP
*@Description: 流程设计弹窗
*@Date 2024-08-14 10:30
-->
<template>
  <div id="procDes">
    <MyProcessDesigner
      :key="`designer-${reloadIndex}`"
      :options="{
        taskResizingEnabled: true,
        eventResizingEnabled: true,
      }"
      v-model="xmlString"
      v-bind="controlForm"
      keyboard
      ref="processDesigner"
      @element-click="elementClick"
      @element-contextmenu="elementContextmenu"
      @init-finished="initModeler"></MyProcessDesigner>

    <!-- 单项节点 -->
    <a-drawer
      title="节点属性"
      :close-on-click-modal="false"
      v-model:open="dialogNodeVisible"
      destroyOnClose
      :maskClosable="false"
      width="60%"
      :zIndex="1002"
      @close="cloaseDialog">
      <div class="drawer-content">
        <user-task-properties
          ref="taskProperties"
          :user-task-id="elementBusinessObject.id"
          :user-task-name="elementBusinessObject.name"
          :element="taskElement"
          :task-modeler="modeler"
          :task-type="taskType"></user-task-properties>
      </div>
      <template #footer>
        <a-row justify="end">
          <u-button-space>
            <a-button
              type="primary"
              @click="saveEdit">
              保存
            </a-button>
            <a-button @click="cloaseDialog">取消</a-button>
          </u-button-space>
        </a-row>
      </template>
    </a-drawer>

    <!-- 流转条件 -->
    <a-drawer
      title="流转条件"
      v-model:open="dialogConditionVisible"
      destroyOnClose
      width="60%"
      :close-on-click-modal="false"
      :maskClosable="false"
      @close="cloaseDialog">
      <div class="drawer-content">
        <ConditionPerties
          ref="conditionProperties"
          :business-object="elementBusinessObject"
          :element="taskElement"
          :cond-modeler="modeler"></ConditionPerties>
      </div>
      <template #footer>
        <div class="drawer-footer f-fr">
          <a-button
            type="primary"
            @click="saveCondition">
            保存
          </a-button>
          <a-button @click="cloaseDialog">取消</a-button>
        </div>
      </template>
    </a-drawer>
  </div>
</template>

<script lang="ts" setup>
defineOptions({
  name: "processDesign",
});
import { ref, reactive, computed, onMounted } from "vue";
// 自定义渲染（隐藏了 label 标签）
import CustomRenderer from "@b/modules/custom-renderer";
// 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务）
import CustomContentPadProvider from "@b/package/designer/plugins/content-pad";
// 自定义左侧菜单（修改 默认任务 为 用户任务）
import CustomPaletteProvider from "@b/package/designer/plugins/palette";
import Log from "@b/package/Log";
import MyProcessDesigner from "@b/designer/ProcessDesigner.vue";
import UserTaskProperties from "@b/components/designercomponents/UserTaskProperties.vue";
import ConditionPerties from "@b/components/designercomponents/ConditionPerties.vue";
import { bpmnEventBus } from '@/util/eventBus'

const props = defineProps({
  processId: String,
  deployMId: String,
  deployMName: String,
});

const xmlString = ref("");
const modeler = ref(null);
const reloadIndex = ref(0);
const pageMode = ref(false);
const controlForm = reactive({
  processId: props.processId,
  deployMName: props.deployMName,
  deployMId: props.deployMId,
  simulation: true,
  labelEditing: false,
  labelVisible: false,
  prefix: "activiti",
  headerButtonSize: "mini",
  events: ["element.click", "element.contextmenu"],
  // additionalModel: []
  // moddleExtension: { user: UserSql },
  additionalModel: [CustomContentPadProvider, CustomPaletteProvider, CustomRenderer],
});

const addis = reactive({
  CustomContentPadProvider,
  CustomPaletteProvider,
});
const dialogNodeVisible = ref(false);
const dialogConditionVisible = ref(false);
const elementBusinessObject = ref({});
const taskElement = ref({});
const taskType = ref("");
const conditionProperties = ref(null);
const taskProperties = ref(null);

function initModeler(modeler1) {
  setTimeout(() => {
    modeler.value = modeler1;
    const canvas = modeler1.get("canvas");

    const rootElement = canvas.getRootElement();
    Log.prettyPrimary("Process Id:", rootElement.id);
    Log.prettyPrimary("Process Name:", rootElement.businessObject.name);
  }, 10);
}

function elementClick(element) {
  taskType.value = element.type.split(":")[1] || "";
  elementBusinessObject.value = JSON.parse(JSON.stringify(element.businessObject));
  if (taskType.value.indexOf("Task") !== -1) {
    taskElement.value = element;
    dialogNodeVisible.value = true;
  }
  if (taskType.value == "SequenceFlow") {
    taskElement.value = element;
    dialogConditionVisible.value = true;
  }
}

function elementContextmenu(element) {}

function toggle() {
  modeler.value.get("toggleMode").toggleMode();
}

function saveEdit() {
  taskProperties.value.saveEdit();
  dialogNodeVisible.value = false;
}

// 保存流转条件
async function saveCondition() {
  dialogConditionVisible.value = false;
  // conditionProperties.value.save();
}

function cloaseDialog() {
  dialogNodeVisible.value = false;
  dialogConditionVisible.value = false;
}
</script>

<style lang="scss">
body {
  overflow: hidden;
  margin: 0;
  box-sizing: border-box;
}

#procDes {
  max-height: 100vh;
  width: 100%;
  box-sizing: border-box;
  display: inline-grid;
  grid-template-columns: auto max-content;
  height: calc(100vh - 110px);
  overflow: hidden;
}

.demo-info-bar {
  position: fixed;
  right: 8px;
  bottom: 108px;
  z-index: 1;
}

.demo-control-bar {
  position: fixed;
  right: 8px;
  bottom: 48px;
  z-index: 1;
}

.open-model-button {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 32px;
  background: rgba(64, 158, 255, 1);
  color: #ffffff;
  cursor: pointer;
}

.zoom-in-right-enter-active,
.zoom-in-right-leave-active {
  opacity: 1;
  transform: scaleY(1) translateY(-48px);
  transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transform-origin: right center;
}

.zoom-in-right-enter,
.zoom-in-right-leave-active {
  opacity: 0;
  transform: scaleX(0) translateY(-48px);
}

.info-tip {
  position: absolute;
  width: 480px;
  top: 0;
  right: 64px;
  z-index: 10;
  box-sizing: border-box;
  padding: 0 16px;
  color: #333333;
  background: #f2f6fc;
  transform: translateY(-48px);
  border: 1px solid #ebeef5;
  border-radius: 4px;

  &::before,
  &::after {
    content: "";
    width: 0;
    height: 0;
    border-width: 8px;
    border-style: solid;
    position: absolute;
    right: -15px;
    top: 50%;
  }

  &::before {
    border-color: transparent transparent transparent #f2f6fc;
    z-index: 10;
  }

  &::after {
    right: -16px;
    border-color: transparent transparent transparent #ebeef5;
    z-index: 1;
  }
}

.control-form {
  .el-radio {
    width: 100%;
    line-height: 32px;
  }
}

.element-overlays {
  box-sizing: border-box;
  padding: 8px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 4px;
  color: #fafafa;
}
</style>
